<template>
	<div>
		<!-- 顶部导航 -->
		<van-nav-bar
			title="商品详情"
			left-text="返回首页"
			left-arrow
			@click-left="onClickLeft"
		></van-nav-bar>
		<!-- 详情页面 -->
		<div class="viewport">
			<!-- 商品图片部分 -->
			<div class="focus" id="goodspic">
				<!-- 商品大图 -->
				<div><img v-if="list[0]" :src="list[0].pic" alt="" /></div>
			</div>
			<!-- 商品参数部分 -->
			<div class="canshu">
				<!-- 标题 -->
				<h1 v-if="list[0]">{{ list[0].title }}</h1>
				<!-- 商品编号 -->
				<p v-if="list[0]">
					<b>商品编号:</b>
					{{ list[0].p_id }} &nbsp;&nbsp;&nbsp;
					<font color="gray">品牌：</font>
					<span style="color: #3188cd">{{ list[0].brand }}</span>
				</p>
				<!-- 价格相关 -->
				<div id="pricediv" v-if="list[0]">
					<p>
						海城价：
						<span class="p16">￥{{ list[0].price }}&nbsp;</span>
						元
					</p>
					<p>
						<font color="gray">
							市场价:&nbsp; {{ list[0].market_price }}&nbsp;元
							&nbsp;&nbsp;
						</font>
						折扣：{{ list[0].discount }}&nbsp;
					</p>
					<p>
						返利：&nbsp;
						<font color="#cc0000">{{ list[0].rebate }}</font>
						元，当次返利下次使用，
						<a href="http://www.hchw.net/help/11.html">
							返利介绍>>
						</a>
					</p>
					<p>
						退换承诺：30天内可退换货 &nbsp;
						<a href="http://m.hchw.net/help/15.html">
							退换货政策>>
						</a>
					</p>
					<p style="color: gray">
						付款方式：支付宝 | 微信支付 | 银行转账
						<span style="color: red">| 不支持到付</span>
					</p>
					<p>
						由本商城销售并从北京发货，
						<span style="color: green">免运费</span>
					</p>
				</div>
			</div>
			<!-- 商品规格类 动态变换-->
			<div class="stock">
				<!-- 颜色 -->
				<div>
					<span class="lt">颜色风格：</span>
					<!-- 颜色选择 -->
					<span style="color: red; line-height: 28px">
						已选择"571黄色"
					</span>
					<ul id="color">
						<!-- 被选中项触发color_selected -->
						<li v-for="(v, i) of this.color" :key="i">
							<span
								:class="currentClass(v)"
								@click="currentInfo(v)"
							>
								{{ v }}
							</span>
						</li>
						<!-- <li>
              <span>柠檬色</span>
            </li>
            <li>
              <span>黄色</span>
            </li> -->
					</ul>
				</div>
				<!-- 尺码 -->
				<div>
					<span class="lt">尺码规格：</span>
					<span style="color: red; line-height: 28px">M</span>
					<ul id="size">
						<!-- 被选中项触发color-selected -->
						<li
							class="color-selected"
							v-for="(v, i) of spec"
							:key="i"
							:class="currentClass1(i)"
							@click="currentInfo1(i)"
						>
							<span>{{ v }}</span>
						</li>
					</ul>
				</div>
				<!-- 购买数量 -->
				<div>
					<span class="lt">购买数量：</span>
					<van-stepper v-model="value" />
				</div>
				<!-- 库存提示 -->
				<div>
					<span class="lt">库存提示：</span>
					<!-- 根据数据内容动态修改有无库存 -->
					<span id="xstock">√有货，可以购买</span>
					<span
						style="float: left; width: 80px; color: #0088cc; text-align: right"
					>
						[库存说明]
					</span>
				</div>
				<!-- 产品预订 -->
				<div
					style="border-top: 1px #333 dashed; height: 100%"
					id="chanpin"
				>
					<span class="lt" style="font-weight: bold; color: red">
						产品预定：
					</span>
					<span>
						如果库存提示已售罄或没有您需要的款式、颜色或尺码，可
						<a href="javascript:void(0)">联系客服</a>
						咨询是否可以预定。
					</span>
				</div>
			</div>
			<!-- 商品下部内容部分 动态变换-->
			<div class="container" v-if="list1[0]">
				<van-tabs v-model="active">
					<van-tab title="图文详情" class="tab_content">
						<b>品牌</b>
						：{{ this.list1[0].brand }}
						<br />
						<b>型号</b>
						：{{ this.list1[0].model }}
						<br />
						<b>重量</b>
						：{{ this.list1[0].weight }}克
						<br />
						<b>面料</b>
						：{{ this.list1[0].materials }}
						<br />
						<b>特点概述：</b>
						<br />
						<span>{{ this.list1[0].special }}</span>
						<br />
						<br />
						<hr />
						<b>商品更多图片</b>
						<span
							style="
                font-size: 12px;
                color: gray;
                margin-left: 10px;
                font-style: italic;
              "
						>
							点击图片可以通过手势缩放图片
						</span>
						<div
							style="
                width: 100%;
                padding: 10px;
                background: #fdfbc5;
                font-size: 12px;
                line-height: 20px;
                margin: 10px 0;
                box-sizing: border-box;
              "
						>
							<font color="red"><b>图片色差说明：</b></font>
							<br />
							因拍照灯光、各显示屏显示效果不同，您看到的商品图片可能会与您收到的商品存在颜色差异，实际颜色以您收到的商品颜色为主。收到商品因色差原因不喜欢的情况可办理一次退换货，用户只需承担商品寄回运费，换货再次寄出运费由我公司承担。
						</div>
						<!-- 这里放长图 -->
						<div>
							<img
								:src="`${this.list1[0].pic}`"
								alt=""
								id="pics"
							/>
						</div>
					</van-tab>
					<!-- 以下是写死的不需要动态 -->
					<van-tab title="付款配送" class="tab_content">
						<strong style="font-size: 14px">
							本商城为您提供以下几种付款方式:
						</strong>
						<br />
						<span class="blue-span">1、在线支付</span>
						<p style="font-size=12px" class="small-p">
							在线支付是一种快捷方便的付款方式，由支付宝公司（www.alipay.com）提供支付接口技术支持，没有支付宝账户也可以付款。
							<br />
							&nbsp;&nbsp;注：信用卡支付如遇到限额问题请使用储蓄卡，感谢理解。
							<span style="color: #009900; font-size: 12px">
								在微信客户端中访问本商城，在线支付方式默认为微信支付。
								<br />
								<a href="http://www.hchw.net/help/45.html">
									微信支付更多说明>>
								</a>
							</span>
						</p>
						<br />
						<br />
						<span class="blue-span">2、转账汇款</span>
						<br />
						<span class="small-p">A、线上办理</span>
						<p class="small-p">
							&nbsp;&nbsp;&nbsp;&nbsp;如果您有网上银行账户，可以登录您的网上银行办理转账汇款业务。
						</p>
						<span class="small-p">B、线下办理</span>
						<p class="small-p">
							&nbsp;&nbsp;&nbsp;&nbsp;请您记下我公司的银行账号，然后到附近的银行营业厅办理转账汇款业务，或者通过相应的银行ATM机办理。
						</p>
						<p class="small-p">
							<span style="color: #e53333; font-size: 12px">
								温馨提醒：
							</span>
							您办理银行转账汇款后，请及时联系我公司查款，我公司查到款后才能及时更改订单状态并安排发货。
						</p>
						<p class="small-p">
							<span style="color: #e53333; font-size: 12px">
								特别说明：：
							</span>
							本商城不接受银行汇票形式的汇款，若给您造成不便敬请见谅。
						</p>
						<p></p>
					</van-tab>
					<van-tab title="常见问题" class="tab_content">
						<strong>
							<span class="blue-span">Q：是正品行货吗？</span>
						</strong>
						<br />
						<strong>
							<span>A：</span>
							是的，我公司不是个体户不是个人，销售的商品必须先得到品牌商或生产商许可的，请您放心购买，100%正品保障，假一赔十。
						</strong>
						<br />
						<strong>
							<span class="blue-span">Q：是正品行货吗？</span>
						</strong>
						<br />
						<strong>
							<span>A：</span>
							是的，我公司不是个体户不是个人，销售的商品必须先得到品牌商或生产商许可的，请您放心购买，100%正品保障，假一赔十。
						</strong>
						<br />
						<strong>
							<span class="blue-span">Q：是正品行货吗？</span>
						</strong>
						<br />
						<strong>
							<span>A：</span>
							是的，我公司不是个体户不是个人，销售的商品必须先得到品牌商或生产商许可的，请您放心购买，100%正品保障，假一赔十。
						</strong>
						<br />
						<strong>
							<span class="blue-span">Q：是正品行货吗？</span>
						</strong>
						<br />
						<strong>
							<span>A：</span>
							是的，我公司不是个体户不是个人，销售的商品必须先得到品牌商或生产商许可的，请您放心购买，100%正品保障，假一赔十。
						</strong>
						<br />
						<strong>
							<span class="blue-span">Q：是正品行货吗？</span>
						</strong>
						<br />
						<strong>
							<span>A：</span>
							是的，我公司不是个体户不是个人，销售的商品必须先得到品牌商或生产商许可的，请您放心购买，100%正品保障，假一赔十。
						</strong>
						<br />
						<strong>
							<span class="blue-span">Q：是正品行货吗？</span>
						</strong>
						<br />
						<strong>
							<span>A：</span>
							是的，我公司不是个体户不是个人，销售的商品必须先得到品牌商或生产商许可的，请您放心购买，100%正品保障，假一赔十。
						</strong>
						<br />
						<strong>
							<span class="blue-span">Q：是正品行货吗？</span>
						</strong>
						<br />
						<strong>
							<span>A：</span>
							是的，我公司不是个体户不是个人，销售的商品必须先得到品牌商或生产商许可的，请您放心购买，100%正品保障，假一赔十。
						</strong>
						<br />
						<strong>
							<span class="blue-span">Q：是正品行货吗？</span>
						</strong>
						<br />
						<strong>
							<span>A：</span>
							是的，我公司不是个体户不是个人，销售的商品必须先得到品牌商或生产商许可的，请您放心购买，100%正品保障，假一赔十。
						</strong>
						<br />
						<strong>
							<span class="blue-span">Q：是正品行货吗？</span>
						</strong>
						<br />
						<strong>
							<span>A：</span>
							是的，我公司不是个体户不是个人，销售的商品必须先得到品牌商或生产商许可的，请您放心购买，100%正品保障，假一赔十。
						</strong>
						<br />
						<strong>
							<span class="blue-span">Q：是正品行货吗？</span>
						</strong>
						<br />
						<strong>
							<span>A：</span>
							是的，我公司不是个体户不是个人，销售的商品必须先得到品牌商或生产商许可的，请您放心购买，100%正品保障，假一赔十。
						</strong>
						<br />
					</van-tab>
					<van-tab title="实体店" class="tab_content">
						<p>
							<strong>地址位置</strong>
							：北京市顺义区李桥镇李天路南半壁店段11号
							北京环宇商务科技园 西1号楼
						</p>
						<p>
							<strong>所在地标</strong>
							：北京环宇商务科技园
						</p>
						<p>
							<strong>地址位置</strong>
							：北京市顺义区李桥镇李天路南半壁店段11号
							北京环宇商务科技园 西1号楼
						</p>
						<p>
							<strong>公交站点</strong>
							：顺义半壁店西站
						</p>
						<p>
							<strong>公交线路</strong>
							：935快、935路、850路快车、850路
						</p>
						<p>
							<strong>服务电话</strong>
							：010-84763310
						</p>
						<p>
							<strong>营业时间</strong>
							：AM 9:30 ~ PM 8:00
						</p>
						<div>
							<a
								href="http://api.map.baidu.com/marker?location=40.041,116.640128&title=%E5%8C%97%E4%BA%AC%E6%B5%B7%E5%9F%8E%E6%88%B7%E5%A4%96&content=%E5%8C%97%E4%BA%AC%E6%B5%B7%E5%9F%8E%E6%88%B7%E5%A4%96%E9%A1%BA%E4%B9%89%E6%97%97%E8%88%B0%E5%BA%97%EF%BC%8C%E7%94%B5%E8%AF%9D%EF%BC%9A(010)84763310&output=html"
							>
								<img
									src="http://img.hchw.net/bjhchw/help/newstoremap.jpg"
									width="100%"
									alt=""
								/>
							</a>
						</div>
					</van-tab>
				</van-tabs>
			</div>
		</div>
		<!-- 用户操作购买或者加入购物车部分 -->
		<!-- 给其中绑定事件进行相关操作 -->
		<van-goods-action>
			<van-goods-action-icon icon="chat-o" text="客服" dot />
			<van-goods-action-icon
				icon="cart-o"
				text="购物车"
				:badge="`${this.sname}`"
				to="/shopcart"
			/>
			<van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
			<van-goods-action-button
				type="warning"
				text="加入购物车"
				@click="shopcart"
			/>
			<van-goods-action-button type="danger" text="立即购买" />
		</van-goods-action>
	</div>
</template>
<style>
* {
	padding: 0;
	margin: 0;
}
a {
	color: #3188cd;
	text-decoration: none;
}

/* 商品图片部分 */

.focus {
	width: 100%;
	border-bottom: 3px #cc0000 solid;
	padding: 10px 0 15px 0;
}
.focus img {
	width: 100%;
	max-width: 315px;
	display: block;
	margin: auto;
}
/* 商品参数部分 */
.canshu {
	width: 100%;
	height: auto;
	padding: 10px;
	font-size: 12px;
	font-family: '\5fae\8f6f\96c5\9ed1';
	box-sizing: border-box;
}
.canshu p {
	width: 100%;
	height: auto;
	line-height: 25px;
	font-size: 12px;
	position: relative;
	z-index: 2;
}
.canshu h1 {
	position: relative;
	z-index: 0;
	width: 100%;
	line-height: 18px;
	font-family: '\5fae\8f6f\96c5\9ed1';
	font-size: 14px;
	font-weight: 500;
	padding-bottom: 10px;
	margin-bottom: 5px;
	border-bottom: 2px #d4d2c5 solid;
}
.p16 {
	color: #ff4400;
	font-size: 16px;
	font-weight: 600;
}
/* 规格部分 */
.stock {
	width: 100%;
	height: auto;
	background: #d7d7d7 !important;
	padding: 10px;
	font-size: 12px;
	position: relative;
	box-sizing: border-box;
}
.stock div {
	width: 100%;
	height: auto;
	margin: 5px auto;
	margin-top: 0;
	clear: both;
	position: relative;
	overflow: hidden;
}
.stock div span.lt {
	font-family: '\5fae\8f6f\96c5\9ed1';
	font-weight: 550;
	height: auto;
	overflow: hidden;
}
.stock div span {
	display: block;
	float: left;
	height: 30px;
	line-height: 30px;
	font-size: 14px;
}
.stock div ul {
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: row;
}
.stock div ul li {
	margin-right: 6px;
	margin-bottom: 5px;
	width: auto;
	white-space: nowrap;
	font-size: 15px;
}
#color span {
	width: 45px;
	height: 30px;
	border-radius: 10%;
	background-color: azure;
	text-align: center;
	font-size: 13px;
	font-family: '微软雅黑';
	line-height: 30px;
}
.color_selected {
	border-radius: 10%;
	border: 1.5px solid red;
}
#size span {
	width: 25px;
	height: 25px;
	border-radius: 10%;
	text-align: center;
	font-size: 12px;
	line-height: 25px;
	background-color: azure;
}
/* 库存 */
.stock div span#xstock {
	width: auto;
	color: red;
}
/* 产品预订 */
#chanpin span:nth-child(2) {
	height: auto;
}
/* 商品后续内容部分 */
.container {
	width: 100%;
	min-height: 500px;
}
/* 标签页 */
.container .tab_content {
	padding: 15px;
	overflow: hidden;
	line-height: 22px;
	font-size: 10.5pt;
}
.blue-span {
	color: #337fe5;
	font-size: 14px;
	font-weight: bold;
}
.small-p {
	font-size: 12px;
}
#pics {
	width: 100%;
	height: 100%;
}
</style>
<script>
import { mapState } from 'vuex';
import { mapMutations } from 'vuex';
export default {
	props: ['lid'],
	data() {
		return {
			//用户输入的购买量
			value: 1,
			//商品后续信息相关
			active: 0,
			//list用来装商品上部的详情
			list: [],
			//list1用来装商品下部的详情
			list1: [],
			//设置spec来装规格信息
			spec: [],
			//color来装规格信息
			color: [],
			currentNumber: '', // 用来判断color_selected样式类是否显示
			
		};
	},
	methods: {
		...mapMutations(['addCar']),
		onClickLeft() {
			this.$router.push(`/`);
		},
		//是否应用color-selected取决于currentNumber的值
		//点击时将当前元素下标和currentNumber绑定(选颜色)
		currentInfo(v) {
			console.log(v);
			this.currentNumber = v;
			//将选中的颜色作为参数返回到list信息，传递到购物车
			this.list[0].color_style = v;
		},
		currentClass(v) {
			return [this.currentNumber == v ? 'color_selected' : ''];
		},
		//是否应用color-selected取决于currentNumber的值
		//点击时将当前元素下标和currentNumber绑定
		currentInfo1(i) {
			this.currentNumber1 = i;
			console.log(e.target);
			// this.this.$nextTick(callback){

			// }
		},
		currentClass1(i) {
			return [this.currentNumber1 == i ? 'color_selected' : ''];
		},
		// 点击跳转购物车事件
		shopcart() {
			//3.详情页中给添加购物车按钮设置点击事件把查询到当前商品的数据加入shopCart,
			console.log(typeof(this.list));
			this.list[0].count = this.value;
			// sessionStorage.setItem("shopCart",this.list);
			this.addCar(this.list[0]);
			this.$router.push('/shopcart');
		}
	},
	mounted() {
		//接受传递过来的参数lid
		console.log(this.lid);
		//发送请求获得商品上部的详情
		this.axios.get(`/detail/${this.lid}`).then(result => {
			// console.log(result.data.results[0].spec);
			this.list = result.data.results;
			// console.log(typeof(this.list))
			console.log(this.list);
			// sessionStorage.setItem("shopCart",this.list);
			this.spec = JSON.parse(result.data.results[0].spec);
			// console.log(this.spec);
			// console.log(JSON.parse(result.data.results[0].color_style));
			this.color = JSON.parse(result.data.results[0].color_style);
			// console.log(this.color);
		});
		this.axios.get(`details/${this.lid}`).then(res => {
			// console.log(res.data);
			this.list1 = res.data.results;
			// console.log(this.list1[0]);
		});
	},
	computed: {
		...mapState(['sname'])
	}
};
</script>
